import React from 'react';
import Api from 'Utils/api';
import { Button, Icon, message } from 'antd';
import { connect } from 'react-redux';
import { API_HOST } from 'Constants/config';
import CommonBorder from './../../../DispatchPage/Components/CommonBorder';

const $ = require('jquery');

class AdviceDetal extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      id: props.params.id,
      suggestsDetail: [],
    };
    this.init = ::this.init;
    this.onPrint = ::this.onPrint;
    this.renderAudio = ::this.renderAudio;
  }
  componentDidMount() {
    this.init();
  }
  onPrint() {
    const area = $('div#detailBody');
    const options = {
      mode: 'iframe',
      popClose: false,
      extraCss: '',
      retainAttr: ['class', 'id', 'style', 'on'],
      extraHead: '<link type="text/css" rel="stylesheet" href="./bundle1.css" /> <link type="text/css" rel="stylesheet" href="./bundle2.css" /> ',
    };
    area.printArea(options);
  }
  init() {
    const { id } = this.state;
    const api = new Api({
      method: 'GET',
      path: `/suggests/admin/${id}`,
      success: (json) => {
        this.setState({
          suggestsDetail: json,
        });
      },
      error: (msg) => {
        message.error(msg);
      }
    });
    api.run();
  }
  renderAudio() {
    const { suggestsDetail } = this.state;
    if (suggestsDetail.media_type === 'video') {
      return (
        <div className="item">
          <span>视频：</span>
          <span className="video-wrap">
            <video controls preload className="video">
              <source src={`${API_HOST}/files/${suggestsDetail.type}`} type="video/mp4" />
            </video>
          </span>
        </div>
      );
    } else if (suggestsDetail.media_type === 'audio') {
      return (
        <div className="item">
          <span>音频：</span>
          <span className="audio-wrap">
            <audio controls preload className="audio">
              <source src={`${API_HOST}/files/${suggestsDetail.type}`} type="audio/mp3" />
            </audio>
          </span>
        </div>
      );
    }
    return '';
  }
  render() {
    const { suggestsDetail } = this.state;
    return (
      <CommonBorder
        title="食安建言详情"
        content={
          <div className="advice-detail-page">
            <div className="advice-detail-content" id="detailBody">
              <div className="item">
                <span>标题：</span>
                <span>{suggestsDetail.title}</span>
              </div>
              {
                suggestsDetail.media_type && this.renderAudio()
              }
              <div className="item">
                <span>内容：</span>
                <span>{suggestsDetail.content}</span>
              </div>
              <div className="item">
                <span>建言者：</span>
                <span>{suggestsDetail.suggester}</span>
              </div>
              <div className="item">
                <span>身份证：</span>
                <span>{suggestsDetail.id_no}</span>
              </div>
              <div className="item">
                <span>联系电话：</span>
                <span>{suggestsDetail.phone}</span>
              </div>
              <div className="item">
                <span>备注：</span>
                <span>{suggestsDetail.remark}</span>
              </div>
              <div className="item">
                <span>是否公开：</span>
                <span>{suggestsDetail.is_shown ? '公开' : '不公开'}</span>
              </div>
            </div>
            <Button className="right-btn" onClick={this.onPrint}>
              <Icon type="printer" />
              打印
            </Button>
          </div>
        }
      />
    );
  }
}

function mapStateToProps(state) {
  return {
    ...state.routing
  };
}

export default connect(mapStateToProps)(AdviceDetal);
